<template>
	<view class="my">
		<view class="title">
			<view class="name">个人中心</view>
		</view>
		<view class="info">
			<view class="box space-between">
				<view class="info-box">
					<view class="info-avatar">
						<image :src="userInfos.avatar" mode="aspectFill" />
					</view>
					<view class="info-name">
						<view class="iname">{{userInfos.nickname}}</view>
						<view class="flex">
							<view class="nid">ID: <text style="font-size: 28rpx;">{{userInfos.idcode}}</text></view>
							<image @click="$utils.copyMessage(userInfos.idcode)" class="copy-btn" src="@/static/icon/copy-icon.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="set-img" @click="$uniApi.to('/pages/my/setting')">
					<image src="/static/icon/set.png" mode="aspectFill" />
				</view>
			</view>
			<!-- <view class="box space-between" @click="goLogin" style="padding: 60rps 30rpx; font-size: 36rpx;" v-else>
				请登录
			</view> -->
			<view class="line space-between">
				<view class="item" @click="$uniApi.to('/pages/my/balance')">
					<view class="num">{{userInfos.now_money}}</view>
					<view class="tips">余额</view>
				</view>
				<view class="colline"></view>
				<view class="item" @click="$uniApi.to('/pages/my/integral')">
					<view class="num">{{userInfos.integral}}</view>
					<view class="tips">积分</view>
				</view>
				<view class="colline"></view>
				<view class="item" @click="$uniApi.to('/pages/my/coupon')">
					<view class="num">{{userInfos.couponCount}}</view>
					<view class="tips">优惠券</view>
				</view>
			</view>
		</view>
		<view class="top row">
			<u-cell-group :border="false">
				<u-cell title="我的包裹" size="large" :isLink="true" arrow-direction="right" @click="toMypackage">
					<u-image width="33rpx" height="33rpx" slot="icon" src="/static/icon/set-box.png"></u-image>
				</u-cell>
				<u-cell title="我的地址" size="large" :isLink="true" :border="false" arrow-direction="right" @click="toMyaddress">
					<u-image width="33rpx" height="33rpx" slot="icon" src="/static/icon/set-address.png"></u-image>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="middle space-between">
			<view class="mtext">
				<view class="ttitle">联系客服</view>
				<view class="mtips">欢迎您致电联系我们！</view>
				<view class="mtips" @tap="ddh">中国客服电话：{{phone}}</view>
			</view>
			<view class="mbtn"  @click="$uniApi.to('/pages/my/about')">点击咨询</view>
		</view>
		<view class="bottom row">
			<u-cell-group :border="false" >
				
				<u-cell title="我的运单" size="large" :isLink="true" arrow-direction="right" @click="toMywaybill">
					<u-image width="33rpx" height="33rpx" slot="icon" src="/static/icon/set-list.png"></u-image>
				</u-cell>
			
				<u-cell title="订单售后" size="large" :isLink="true" arrow-direction="right" @click="toMyservice">
					<u-image width="33rpx" height="33rpx" slot="icon" src="/static/icon/set-menu.png"></u-image>
					<text slot="value" style="color: #666;">{{userInfos.order_after}}</text>
				</u-cell>
				<u-cell :title="`分享得${userInfos.is_promoter==1?'佣金':'积分'}`" size="large" :isLink="true"  arrow-direction="right" @click="toShare">
					<u-image width="33rpx" height="33rpx" slot="icon" src="/static/icon/set-pay.png"></u-image>
					<text slot="value" class="u-slot-value">HOT</text>
				</u-cell>
				<!-- <u-cell  title="申请成为代理商" v-if="userInfos.is_promoter!=1" size="large" :title-style="{'color': '#f32832'}" :isLink="true"  arrow-direction="right" @click="toApplyAgent">
					<u-image width="33rpx" height="33rpx" slot="icon" src="/static/icon/set-agent.png"></u-image>
				</u-cell> -->
				<u-cell v-if="userInfos.is_promoter==1" title="我的团队" size="large" :isLink="true" :border="false" arrow-direction="right" @click="toMyTeam">
					<u-image width="33rpx" height="33rpx" slot="icon" src="/static/icon/set-myTeam.png"></u-image>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';


	export default {
		data() {
			return {
				userInfos:{},
				phone: '',
				popupShow:false
			};
		},
		// computed: {
		// 	...mapState(['userInfo'])
		// },

		onShow() {
			this.getUserInfos();
			// this.userInfos = uni.getStorageSync("userInfo")||{};
			// this.userInfos = this.$store.state.userInfo;
			// console.log(this.userInfos,"userInfo 11")
		},
		onLoad() {
			this.getPhone()
		},
		methods: {
			getUserInfos(){
				this.$api.post({
					url: "/ebapi/user_api/get_my_user_info",
					data: {},
					success: (res) => {
						console.log(res,"res 用户信息")
						this.userInfos = res;
					},
				})
			},
			ddh() {
				wx.makePhoneCall({
					phoneNumber: this.phone, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			// goLogin(){
			// 	 this.$uniApi.rl("/pages/auth/login");
			// },
			// 获取联系手机号
			getPhone() {
				this.$api.post({
					url: "/ebapi/public_api/connection",
					data: {},
					success: (res) => {
						this.phone = res.phone;
					},
				})
			},
			// 去我的包裹
			toMypackage() {
				this.$uniApi.to("/pages/home/noArrived?current=0");
			},
			// 去我的地址
			toMyaddress() {
				this.$uniApi.to("/pages/my/myAddress");
			},
			// 去我的运单
			toMywaybill() {
				this.$uniApi.to("/pages/my/waybill");
			},
			// 去我的售后
			toMyservice() {
				this.$uniApi.to("/pages/my/service");
			},
			// 去我的售后
			toShare() {
				this.$uniApi.to("/pages/my/share");
			},
			// 去我的团队
			toMyTeam() {
				this.$uniApi.to("/pages/my/myTeam");
			},
			// 去申请代理
			toApplyAgent(){
				this.$uniApi.to("/pages/my/applyAgent");
			}
		},
	};
</script>

<style lang="scss" >
	page {
		padding: 0;
		background-color: #f7f8fa;
		padding-bottom: 30rpx;
	}

	.my {
		padding-bottom: 30rpx;
		image {
			width: 100%;
			height: 100%;
		}
		// ::v-deep{
		// 	.u-cell__body{
		// 		padding: 30rpx;
		// 	  }
		// 	}
		.title {
			background-image: url("https://jyapi.rapidship.cn/public/temporary/set-bg.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 750rpx;
			height: 520rpx;

			.name {
				color: $uni-text-color-inverse;
				font-size: 32rpx;
				font-weight: bold;
				padding-top: 60rpx;
				height: 55px;
				line-height: 55px;
				margin-left: 30rpx;
			}
		}

		.info {
			width: 690rpx;
			height: 389rpx;
			padding: 50rpx;
			margin: 0 30rpx;
			margin-top: -340rpx;
			background: $uni-text-color-inverse;
			box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
			border-radius: 16rpx;
			opacity: 1;

			.box {
				padding-bottom: 35rpx;
				border-bottom: 1rpx solid #cccccc;

				.info-box {
					display: flex;
					align-items: center;

					.info-avatar {
						width: 125rpx;
						height: 125rpx;
						border-radius: 50%;
						background: $uni-text-color-inverse;
						box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
						opacity: 1;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 110rpx;
							height: 110rpx;
							border-radius: 50%;
						}
					}

					.info-name {
						margin-left: 30rpx;

						.iname {
							font-size: 36rpx;
							font-weight: bold;
							margin-bottom: 15rpx;
						}

						.nid {
							display: inline-block;
							font-size: 24rpx;
							color: #ffffff;
							padding: 5rpx 16rpx;
							background: #2354e3;
							border-radius: 25rpx;
							opacity: 1;
						}
					}
				}

				.set-img {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.line {
				padding-top: 45rpx;

				.item {
					text-align: center;

					.num {
						font-size: 36rpx;
						font-weight: bold;
					}

					.tips {
						color: #999999;
						font-size: 24rpx;
					}
				}

				.colline {
					border-right: 1rpx solid #cccccc;
					height: 52rpx;
				}
			}
		}

		.top {
			width: 690rpx;
			// height: 218rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			margin: 25rpx auto;
		}

		.middle {
			background-image: url("https://jyapi.rapidship.cn/public/temporary/kefu-bg.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 690rpx;
			height: 200rpx;
			padding: 35rpx 32rpx;
			margin: 0 auto;

			.mtext {
				color: $uni-text-color-inverse;

				.ttitle {
					font-size: 36rpx;
					font-weight: bold;
				}

				.mtips {
					margin-top: 15rpx;
					font-size: 20rpx;
				}
			}

			.mbtn {
				width: 169rpx;
				height: 64rpx;
				font-size: 30rpx;
				line-height: 64rpx;
				background: #ffffff;
				box-shadow: 0rpx 3rpx 12rpx 1rpx rgba(0, 0, 0, 0.16);
				border-radius: 34rpx;
				opacity: 1;
				text-align: center;
			}
		}

		.bottom {
			width: 690rpx;
			// height: 335rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			margin: 24rpx auto;

			.u-slot-value {
				width: 69rpx;
				height: 33rpx;
				line-height: 33rpx;
				background: linear-gradient(270deg, #f32832 0%, #f97277 100%);
				border-radius: 17rpx;
				opacity: 1;
				color: #ffffff;
				font-size: 20rpx;
				font-weight: bold;
				padding-left: 9rpx;
			}
		}
	}
</style>